<script>
  import '@shoelace-style/shoelace/dist/components/button/button.js';
  import '@shoelace-style/shoelace/dist/components/input/input.js';
  import '@shoelace-style/shoelace/dist/components/card/card.js';
  import '@shoelace-style/shoelace/dist/components/icon/icon.js';
  import {localInfo} from "$lib/stores/Storage.svelte.js";
  import { fade } from 'svelte/transition';
  import {goto} from "$app/navigation";
  import {seletedRoute, status} from "$lib/stores/globalControl.svelte.js";
  import { page } from '$app/state';

  let username = '';
  let password = '';
  let showPassword = false;
  let once = true;         //登录按钮放置反复快速点击
  let isOpen = false;      //alter的开关
  let loginState = false;  //失败的状态

  let isWarn = false;

  async function handleLogin(event) {
      if(username.length === 0 || password.length === 0){
        isWarn = true;
        once = true;
        return;
      }
      // 这里可以添加登录逻辑
      let response = await fetch(`http://localhost:3000/userinfo?email=${username}&password=${password}`)
      let result = {};
      if(response.ok){
        result = await response.json();

        isOpen = true;
        if(!result.length){//代表密码或账号错误
           loginState = false;
        }else{//账号和密码是正确的
           loginState = true;
           //把用户的一部分信息存储到localStorage中
           localInfo.set(result);
           status.set(false);
           goto("/");
        }

        once = true;

        let sto = setTimeout(()=>{
          isOpen = false;
          clearInterval(sto);
        },3000)
      }
  }
</script>

<svelte:window onkeydown={event=>{
  if(event.key==="Enter"){
    once = false;
    handleLogin(event);
  }
}}/>

{#if isWarn}
  <sl-alert variant="warning" closable  open={isWarn} onsl-hide={()=>{isWarn=false}}>
    <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
    <strong>账户或密码不能为空！</strong><br />
  </sl-alert>
{/if}

{#if isOpen}
  <sl-alert
          variant={loginState?"success":"danger"}
          open={isOpen} closable
          class="alert-closable"
          onsl-hide={()=>{ //sl-alert 关闭时间触发
              isOpen = false;
          }}
  >
    <sl-icon slot="icon" name={loginState?'check2-circle':"exclamation-octagon"}></sl-icon>
    {loginState ? "登录成功！" : "账户或密码错误！"}
  </sl-alert>
{/if}

<div class="login-container">
  <sl-card class="login-card" in:fade={{ duration: 500 }}>
    <h2>欢迎登录</h2>
    <sl-input
      label="用户名"
      placeholder="请输入用户名"
      value={username}
      pill="true"
      onsl-input={e=>{
        username = e.target.value;
      }}
    />
    <sl-input
      type={showPassword ? "text" : "password"}
      label="密码"
      placeholder="请输入密码"
      value={password}
      pill="true"
      onsl-input={e=>{
        password = e.target.value;
      }}
    >
      <sl-icon-button
              slot="suffix"
              name={showPassword ? 'eye' : 'eye-slash'}
              onclick={() => showPassword = !showPassword}
              title={showPassword ? '隐藏密码' : '显示密码'}
      />
    </sl-input>
    <sl-button
            variant="primary"
            onclick={event=>{
               if(once){
                 once = false;
                 handleLogin(event);
               }
            }}
            pill="true"
    >
      登录
    </sl-button>
  </sl-card>
</div>

<style>
  .login-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  sl-input {
    margin-bottom: 1rem;
  }

  sl-button {
    width: 100%;
    margin-top: 1rem;
  }
</style>